import { useStorage } from "./hooks/useStorage";
import React, { useState, useTransition } from "react";
import "./App.css";
import { Input, List } from "antd";
import Item from "antd/es/list/Item";

interface Item {
  id: number;
  name: string;
  address: string;
}

function App() {
  const [val, setVal] = useState("");
  const [list, setList] = useState<Item[]>([]);
  // !!! startTransition 的核心作用就是 降低其回调函数中状态更新的优先级，避免耗时操作阻塞更紧急的更新（如用户交互）。
  const [isPending, startTransiton] = useTransition();
  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const value = e.target.value;
    console.log(value);
    setVal(value);
    fetch("/api/list?keyWord=" + value)
      .then((res) => res.json())
      .then((res) => {
        // console.log(res)
        startTransiton(() => {
          setList(res.list);
        });
        // setList(res.list);
      });
  };

  return (
    <>
      <div>
        <Input value={val} onChange={handleChange} type="text" />
        {isPending && <div>Loading...</div>}
        <List
          renderItem={(item) => (
            <List.Item>
              <List.Item.Meta title={item.name} description={item.address} />
            </List.Item>
          )}
          dataSource={list}
        ></List>
      </div>
    </>
  );
}

export default App;
